<template>
	<div>
		<!-- 筛选条件部分，添加响应式布局 -->
		<div
			class="bg-bg-3 rounded-lg px-5 py-4 mb-2 flex flex-col lg:flex-row lg:text-t-1 bg-[#1B2538]"
			style="background-color: #1b2538">
			<!-- 活动名称选择框 -->
			<div class="w-full lg:basis-1/4 mb-4 lg:mb-0">
				<div class="leading-5 text-t-2 txt-label" style="margin-bottom: 2px">
					{{ $t('agent.subordinate.CampaignName') }}
				</div>
				<base-popselect
					:model-value="name"
					size="small"
					:options="nameList"
					:show-tick="false"
					@update:model-value="onNameChange"
					placement="bottom-start"
					selected-class="w-[284px] h-[34px] px-[8px] rounded-sm flex justify-between items-center text-t-2 bg-bg-2"
					itemClass="select-item"
					dropdown-class="text-left"></base-popselect>
			</div>
			<!-- 垂直分隔线 (仅在宽屏显示) -->
			<div class="hidden lg:block w-[2px] h-[50px] bg-border-1 mx-7"></div>
			<!-- 排序依据选择框 -->
			<div class="w-full lg:basis-1/4">
				<div class="leading-5 txt-label" style="margin-bottom: 2px">
					{{ $t('agent.subordinate.SortBy') }}
				</div>
				<base-popselect
					clearable
					:model-value="sort"
					size="small"
					:options="sortList"
					:show-tick="false"
					@update:model-value="onSortChange"
					placement="bottom-start"
					selected-class="w-[284px] h-[34px] px-[8px] rounded-sm flex justify-between items-center text-t-2 bg-bg-2"
					option-class="hover:bg-[#131A27] hover:text-white"
					dropdown-class="text-left"
					itemClass="select-item"></base-popselect>
			</div>
		</div>

		<!-- 表格部分，添加滚动支持 -->
		<div class="overflow-x-auto lg:overflow-visible">
			<up-table
				:loading="loading"
				ref="el"
				:options="tableOptions"
				:data="listData"
				idKey="userId"
				:isEmpty="listData.length === 0"
				class="min-w-[800px] lg:min-w-0">
				<template #currency="{ data }">
					<div class="flex items-center gap-1">
						<base-currency :currency="data.currency" />
						{{ data.currency }}
					</div>
				</template>
				<template #claimed="{ data }">
					<up-amount :currency="data.currency" :value="data.claimed" />
				</template>
				<template #claimable="{ data }">
					<up-amount :currency="data.currency" :value="data.claimable" />
				</template>
				<template #registrationDate="{ data }">
					{{ data.registrationDate ? dateFormat(data.registrationDate) : '--' }}
				</template>
				<template #recentRechargeTime="{ data }">
					{{ data.recentRechargeTime ? dateFormat(data.recentRechargeTime) : '--' }}
				</template>
			</up-table>
		</div>
	</div>
</template>

<script setup lang="ts">
import { BasePopselect } from '@/components/base'
import { UpTable, TableOptions, UpAmount } from '@/components/up'
import { ref, computed, onMounted } from 'vue'
import { Currency } from '@/enums'
import { useProfileStore } from '@/store'
import { getCampaignName, getInvitedPlayer } from '@/api/agent'
import { dateFormat } from '@/utils'
import { useI18n } from 'vue-i18n'

const profileStore = useProfileStore()
const userId = ref<number>()
const userInfo = ref(profileStore.userInfo)
if (userInfo.value) {
	userId.value = userInfo.value.id
}
const loading = ref(false)
const getInvitedPlayers = async () => {
	const queryObj: any = {
		userId: userId.value as number
	}
	// if (name.value !== 0) {
	// 	queryObj.inviteName = name.value
	// }
	queryObj.inviteName = name.value
	if (name.value === 0) {
		queryObj.inviteName = ''
	}
	if (sort.value) {
		queryObj.sortBy = sort.value
	}
	try {
		loading.value = true
		const res = await getInvitedPlayer(queryObj)

		if (res.code === 200) {
			listData.value = res.data || []
		}
	} catch (error) {
	} finally {
		loading.value = false
	}
}

const tableOptions = computed<TableOptions[]>(() => [
	{
		prop: 'userName',
		textT: 'agent.subordinate.Username'
	},
	{
		prop: 'registrationDate',
		textT: 'agent.subordinate.Registered',
		slot: 'registrationDate'
	},
	{
		prop: 'inviteName',
		textT: 'agent.subordinate.Campaign'
	},
	{
		prop: 'recentRechargeTime',
		textT: 'agent.subordinate.LastDeposit',
		slot: 'recentRechargeTime'
	},
	{
		prop: 'rechargeAmount',
		textT: 'agent.subordinate.Deposits',
		align: 'right',
		type: 'amount',
		attrs: {
			currency: Currency.us
		}
	},
	{
		prop: 'totalBetAmountUSD',
		textT: 'agent.subordinate.Wagered',
		align: 'right',
		type: 'amount',
		attrs: {
			currency: Currency.us
		}
	},
	{
		prop: 'totalRebateUsd',
		textT: 'agent.subordinate.CommissionEarnings',
		align: 'right',
		type: 'amount',
		attrs: {
			currency: Currency.us
		}
	},
	{
		prop: 'totalFeeUsd',
		textT: 'agent.subordinate.IntroductionEarnings',
		align: 'right',
		type: 'amount',
		attrs: {
			currency: Currency.us
		}
	},
	{
		prop: 'totalIncome',
		textT: 'agent.subordinate.TotalEarnings',
		align: 'right',
		type: 'amount',
		attrs: {
			currency: Currency.us
		}
	}
])

const listData = ref([
	// {
	// 	Username: 'User A',
	// 	Registered: '04-12-2024',
	// 	Campaign: 'July23',
	// 	LastDeposit: '04-12-2024',
	// 	Deposits: 1000.0,
	// 	Wagered: 1000.0,
	// 	CommissionEarnings: 1000.0,
	// 	IntroductionEarnings: 1000.0,
	// 	TotalEarnings: 1000.0
	// },
	// {
	// 	Username: 'User B',
	// 	Registered: '04-12-2024',
	// 	Campaign: 'July23',
	// 	LastDeposit: '04-12-2024',
	// 	Deposits: 1000.0,
	// 	Wagered: 1000.0,
	// 	CommissionEarnings: 1000.0,
	// 	IntroductionEarnings: 1000.0,
	// 	TotalEarnings: 1000.0
	// }
])

const name = ref<string | number>(0)

interface NameOption {
	text: string
	id: string | number
}

const nameList = ref<NameOption[]>([])
const getNameList = async () => {
	// 在这里发出请求获取名称列表
	const res = await getCampaignName({ userId: userId.value as number })
	if (res.code === 200) {
		nameList.value = (res.data || []).map((item: any) => {
			return {
				text: item,
				id: item
			}
		})
		nameList.value = [{ text: '全部', id: 0 }, ...nameList.value]
	}
}
const sort = ref(0)

const { t: $t } = useI18n()

const sortList = ref([
	{ text: $t('agent.subordinate.sort.registerTime'), id: 0 },
	{ text: $t('agent.subordinate.sort.recentDeposit'), id: 1 },
	{ text: $t('agent.subordinate.sort.recentDepositTime'), id: 2 },
	{ text: $t('agent.subordinate.sort.totalBet'), id: 3 },
	{ text: $t('agent.subordinate.sort.totalIncome'), id: 4 }
])
// 排序变更事件处理
const onSortChange = (value: number) => {
	sort.value = value
	loading.value = true
	getInvitedPlayers()
}
// 名称变更事件处理
const onNameChange = (value: string) => {
	name.value = value
	loading.value = true
	getInvitedPlayers()
}
onMounted(() => {
	getInvitedPlayers()
	getNameList()
})
</script>
<style scoped lang="scss">
.txt-label {
	color: var(--text-396-a-5-aa, #96a5aa);

	/* SF Pro Semibold 600/base */
	font-family: 'SF Pro Display';
	font-size: 14px;
	font-style: normal;
	font-weight: 600;
	line-height: 20px;
	/* 142.857% */
	letter-spacing: 0.035px;
}

:deep(.cursor-pointer) {
	//background-color: #131a27;
}

:global(.select-item) {
	background-color: #1b2538 !important;
}

:global(.select-item .base-icon) {
	display: none;
}
</style>
